<template>
  <div class="screen-container">
    <div class="screen-content">
      <div class="dashboard-container">
        <!-- Sidebar: Monitoring & Alerts -->
        <aside class="sidebar">
          <section class="monitoring">
            <!-- Health Circle -->
            <div class="health-circle">
              <div class="percent">100%</div>
              <div class="legend">
                <span class="healthy">健康 Pods: 21</span>
                <span class="unhealthy">异常 Pods: 0</span>
              </div>
            </div>
            <!-- Resource Usage -->
            <div class="resources">
              <div class="resource-item">
                <span class="resource-label">CPU</span>
                <span class="resource-value">23.10c</span>
              </div>
              <div class="resource-item">
                <span class="resource-label">内存</span>
                <span class="resource-value">59.32GB</span>
              </div>
              <div class="resource-item">
                <span class="resource-label">存储</span>
                <span class="resource-value">30.00GB</span>
              </div>
              <div class="resource-item">
                <span class="resource-label">流量</span>
                <span class="resource-value">~GB</span>
              </div>
            </div>
          </section>
          <!-- Alerts -->
          <section class="alerts">
            <div class="alert-title">告警</div>
            <div class="alert-content">
              <div class="alert-item">暂无告警信息</div>
            </div>
          </section>
        </aside>

        <!-- Main Content: App Grid -->
        <main class="main-content">
          <!-- Search Bar -->
          <div class="search-bar">
            <input type="text" placeholder="搜索应用" />
          </div>
          
          <!-- App Grid -->
          <div class="app-grid">
            <!-- Example App Item -->
            <div
              class="app-item"
              v-for="app in apps"
              :key="app.name"
              @click="handleAppClick(app)"
            >
              <div class="app-icon-container" :class="{ 'highlighted': app.highlighted }">
                <div class="app-icon" :style="{ background: app.bg }">
                  <!-- Placeholder for icon -->
                  <span>{{ app.icon }}</span>
                </div>
              </div>
              <div class="app-name">{{ app.name }}</div>
            </div>
          </div>
        </main>

        <!-- Right Panel: User & Account -->
        <aside class="right-panel">
          <div class="user-info">
            <div class="user-id">15316909456</div>
            <div class="user-subid">ID: e1a1AFO-V8</div>
            <button class="logout-btn" @click="handleLogout">登出</button>
          </div>
          <div class="user-actions">
            <div class="action-item">杭州H</div>
            <div class="action-item">个人空间</div>
            <div class="action-item">账户设置</div>
            <div class="action-item">工单</div>
            <div class="action-item">Kubeconfig</div>
          </div>
          <div class="account-info">
            <div class="account-item">
              <span class="account-label">余额</span>
              <span class="account-value">4646.60</span>
            </div>
            <div class="account-item">
              <span class="account-label">预计还能使用</span>
              <span class="account-value">403 天</span>
            </div>
            <div class="account-item">
              <span class="account-label">过去30天已使用</span>
              <span class="account-value">1199.54</span>
            </div>
            <div class="account-item">
              <span class="account-label">未来30天预计使用</span>
              <span class="account-value">346.03</span>
            </div>
          </div>
        </aside>
      </div>
      
      <!-- Bottom Navigation -->
      <nav class="bottom-nav">
        <div class="nav-item" v-for="nav in navs" :key="nav">
          <span class="nav-icon">{{ nav }}</span>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
import { removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

export default {
  data() {
    return {
      apps: [
        { name: 'AI Proxy', icon: '🤖', bg: '#fff' },
        { name: '应用管理', icon: '⬛', bg: '#fff', highlighted: true },
        { name: '费用中心', icon: '💰', bg: '#fff' },
        { name: '定时任务', icon: '⏲️', bg: '#fff' },
        { name: '数据库', icon: '🗄️', bg: '#fff' },
        { name: 'Devbox', icon: '💻', bg: '#fff' },
        { name: 'KubePanel', icon: '🌀', bg: '#fff' },
        { name: '对象存储', icon: '🗂️', bg: '#fff' },
        { name: '云开发', icon: '💡', bg: '#fff' },
        { name: '文档中心', icon: '📄', bg: '#fff' },
        { name: '应用商店', icon: '🏪', bg: '#fff' },
        { name: '终端', icon: '⌨️', bg: '#fff' },
        { name: '工单', icon: '📝', bg: '#fff' },
        { name: 'FastGPT', icon: '⚡', bg: '#fff' },
        { name: '邀请注册', icon: '👥', bg: '#fff' },
        { name: '私有云', icon: '☁️', bg: '#fff' },
      ],
      navs: ['🏠', '⬛', '🗄️', '⏲️', '👤']
    }
  },
  methods: {
    handleAppClick(app) {
      if (app.name === '应用管理') {
        window.open('/disk', '_blank')
      }
      // 可根据需要添加其他应用的跳转逻辑
    },
    
    handleLogout() {
      // 清除token
      removeToken()
      // 重置路由
      resetRouter()
      // 跳转到登录页面
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
/* 大屏展示样式 */
.screen-container {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.screen-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
  max-width: 95%;
  max-height: 95%;
  display: flex;
  flex-direction: column;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 原有样式保持不变 */
.dashboard-container {
  display: flex;
  flex-direction: row;
  min-height: 80vh;
  background: linear-gradient(to bottom, #e6f0fa 0%, #1a3a6b 100%);
  border-radius: 15px;
  flex: 1;
  padding: 20px;
}

.sidebar {
  width: 260px;
  background: rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.monitoring {
  margin-bottom: 24px;
}

.health-circle {
  background: #fff;
  border-radius: 50%;
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.percent {
  font-size: 2.5rem;
  font-weight: bold;
  color: #1abc9c;
  margin-bottom: 10px;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.healthy, .unhealthy {
  font-size: 0.9rem;
}

.healthy { 
  color: #1abc9c; 
}

.unhealthy { 
  color: #e74c3c; 
}

.resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 16px;
  font-size: 0.9rem;
}

.resource-item {
  display: flex;
  flex-direction: column;
}

.resource-label {
  color: #666;
  margin-bottom: 4px;
}

.resource-value {
  font-weight: 500;
  color: #333;
}

.alerts {
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 16px;
  min-height: 100px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.alert-title {
  color: #f39c12;
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.alert-content {
  min-height: 60px;
}

.alert-item {
  color: #888;
  font-size: 0.9rem;
}

.main-content {
  flex: 1;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
}

.search-bar {
  margin-bottom: 32px;
  width: 100%;
}

.search-bar input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1px solid #e0e0e0;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px 20px;
  flex: 1;
  margin-top: 10px;
}

.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 15px 10px;
  border-radius: 16px;
}

.app-item:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.app-icon-container {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.app-icon-container.highlighted {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.app-icon-container.highlighted::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: rotate(30deg);
}

.app-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(5px);
}

.app-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-align: center;
  transition: all 0.3s ease;
  padding: 0 5px;
}

.app-item:hover .app-name {
  color: #7c5cff;
  font-weight: 600;
}

.right-panel {
  width: 260px;
  background: rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.user-info {
  text-align: right;
  margin-bottom: 24px;
}

.user-id {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.user-subid {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 12px;
}

.logout-btn {
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.logout-btn:hover {
  background: #c0392b;
}

.user-actions {
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.action-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.action-item:last-child {
  border-bottom: none;
}

.account-info {
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 16px;
  font-size: 0.9rem;
}

.account-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.account-item:last-child {
  border-bottom: none;
}

.account-label {
  color: #666;
}

.account-value {
  font-weight: 500;
  color: #333;
}

.bottom-nav {
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  border-radius: 0 0 15px 15px;
  margin-top: 20px;
  padding: 0 20px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 12px;
  transition: background 0.3s;
}

.nav-item:hover {
  background: #f5f5f5;
}

.nav-icon {
  font-size: 1.5rem;
}
</style>